<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="dashboard/header :: header"></head>
<body>

<!--
@desc  添加
@author WeiXiaoJin
@since 2019-05-18 23:04:49
-->
	<div layout:fragment="content">
		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<div class="row">
					<!-- /.col-->
					<div class="col-sm-12">
						<div class="card">
							<div class="card-body">

								<form class="form-horizontal" id="addForm" style="float:left;width:100%" enctype="multipart/form-data">
								
									<input type="hidden" name="formToken" th:value="${session.formToken}" />

									<div class="form-group row margin-right-0">
										<label class="col-md-2 col-form-label control-label" for="text-input">图片名称</label>
										<div class="col-md-9">
											<input class="form-control" id="imagesName" type="text" name="imagesName" placeholder="图片名称">
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-2 col-form-label control-label" for="text-input">文件地址</label>
										<div class="col-md-9">
											<!-- 
											<input class="form-control" id="imagesPath" type="text" name="imagesPath" placeholder="文件地址">
											<input type="file" name="file" multiple="multiple" onchange="preview(this)" class="form-control-file" id="exampleFormControlFile1">
											<div id="preview">
												<img style="width: 80px; height: 80px; margin-top: 10px; border-radius: 5px;" src="">	
											</div>
											-->
											<input class="form-control" id="imagesPath" type="hidden" name="imagesPath" placeholder="文件地址">
											<div class="file-loading">
												<input id="inputFiles" type="file" name="file" multiple>
											</div>
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-2 col-form-label control-label" for="text-input">海报描述</label>
										<div class="col-md-9">
											<!-- 
											<textarea class="form-control" id="textarea-input" name="imagesDesc" rows="2" placeholder="海报描述"></textarea>
											 -->
											<input class="form-control" id="imagesDesc" type="text" name="imagesDesc" placeholder="描述">
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-2 col-form-label control-label" for="text-input">图片标识</label>
										<div class="col-md-9">
											<input class="form-control" id="imagesTag" type="text" name="imagesTag" placeholder="图片标识">
										</div>
									</div>
							
								</form>
							</div>

						</div>
					</div>
					<!-- /.col-->
				</div>
			</div>
		</div>

	</div>
	
	<footer th:replace="dashboard/footer :: footer"></footer>
	<script type="text/javascript" th:src="@{/resources/js/project.js}"></script>
	
	<!-- 文件上传_start -->
	<link th:href="@{/asserts/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet">
	<link th:href="@{/asserts/ajax/libs/bootstrap-fileinput/themes/explorer/theme.min.css}" rel="stylesheet">
	
	<script th:src="@{/asserts/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
	<script th:src="@{/asserts/ajax/libs/bootstrap-fileinput/themes/explorer/theme.min.js}"></script>
	<!-- 文件上传_end -->

	<script type="text/javascript">
		
		var addForm = $("#addForm") ; 
		$(function(){
			addForm.validate({
				ignore: [],  
				rules: {
					imagesName: "required" ,
					imagesDesc: "required" ,
					imagesPath: "required" ,
					exampleFormControlFile1: "required" ,
					imagesTag: "required"
				}
			});
			
			$.upload.initBootstrapInput("inputFiles" , ctx + "web/storage/bootstrapInputMultiUpload" , function(data , index){
				// console.log('index = ' + index + ' , status = ' + data.status + ' , path ' + data.filePath) ;
				$("input[name=imagesPath]").val(data[0].filepath) ; 
			}) ; 
		}) ;
		
		function submitHandler() {
			var result = $.validate.form("addForm");
			if(result){	
				$.operate.save(ctx+"portal/desktop/web/uploadImages/save" , $('#addForm').serialize());
			}
	    }
	
	</script>

</body>
</html>

